<!-- 合同弹出层 -->
<template>
	<el-dialog
		v-model="state.dialogVisible"
		title="合同账单明细"
		width="60%"
		center
		:before-close="handleClose"
	>
		<div class="establish">
			<div class="establish_item">
				<div class="label">合同总金额</div>
				<div class="content"><span>888888</span><span>元</span></div>
			</div>
			<div class="establish_item">
				<div class="label">已结清总金额</div>
				<div class="content"><span>888888</span><span>元</span></div>
			</div>
			<div class="establish_item">
				<div class="label">剩余未结清总金额</div>
				<div class="content"><span>888888</span><span>元</span></div>
			</div>
		</div>

		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="state.tableData"
			:isPaging="false"
			:tableOption.sync="state.tableOption"
		>
			<template #operation="scope">
				<!-- <span
              style="cursor: pointer;color: #fc7037"
              @click="toPath(scope.row)"
          >{{scope.row.operation}}</span> -->
				<el-button
					size="small"
					color="#FC7018"
					style="color: #fff"
					type="primary"
					>查看资金支付审批单</el-button
				>
			</template>
		</public-table>

		<template #footer>
			<span class="dialog-footer">
				<!-- <el-button type="primary"  @click="state.dialogVisible = false">
					提交
				</el-button> -->
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import PublicTable from "@/components/PublicTable";

import { ElDialog, ElForm } from "element-plus";

// const props = defineProps({
// 	titleName: {
// 		type: String,
// 		required: true,
// 		default: "",
// 	},
// });

const state = reactive({
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	tableOption: [
		{ label: "实付金额", prop: "" },
		{ label: "申请付款日期", prop: "" },
		{ label: "资金支付审批单编号", prop: "" },
		{ label: "审核通过日期", prop: "" },
		{ label: "操作", prop: "operation", slot: true, width: 200 },
	],
	tableData: [
		{
			operation: "111",
		},
		{
			operation: "111",
		},
	],
	dialogVisible: false,
});

// 开启弹窗
const open = () => {
	state.dialogVisible = true;
};

const handleClose = () => {
	state.dialogVisible = false;
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
.establish {
	display: flex;
	justify-content: space-between;
	.establish_item {
		display: flex;
		.label {
			width: 120px;
			line-height: 40px;
			font-size: 14px;

			font-weight: 700;
			color: #1a1a1a;
			text-align: right;
			margin-right: 10px;
		}
		.content {
			width: 200px;
			height: 40px;
			background: #f7f7fa;
			border-radius: 4px;
			text-align: center;
			line-height: 40px;
			span {
				font-size: 14px;
				color: #666666;
			}
		}
	}
}
</style>
